<script setup name="search-single">
import { Play } from '@icon-park/vue-next'
import { useSearchResults } from '@/hookes/useSearch'

import IconPark from '@/components/common/IconPark.vue'
import MusicCell from '@/components/common/MusicCell.vue'

const props = defineProps({
  searchKey: {
    type: String
  }
})

const { list, loading, finished, onLoad, playAll } = useSearchResults('songs')
</script>

<template>
  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <MusicCell :list="list" :show-sticky="false">
      <template #radius>
        <van-cell>
          <template #title>
            <div class="playAll">
              <IconPark :icon="Play" theme="filled" fill="#fe3a39" :size="6" :strokeWidth="6" @click="playAll" />
              <h3>播放全部</h3>
            </div>
          </template>
        </van-cell>
      </template>
    </MusicCell>
  </van-list>
</template>

<style scoped lang="scss">
.van-cell {
  background-color: var(--color-background);
  opacity: .9;
  color: var(--reversal-text);
}
</style>